<template>
  <view>
    <div class="page-search">
      <u-search
        :show-action="false"
        shape="round"
        bg-color="#f2f2f2"
        height="60"
        placeholder="请输入服务产品名称搜索"
        :value="searchForm.name"
        @change="valueChange($event, 'name')"
        @search="$emit('loadData', true)"
      ></u-search>
    </div>
    <div class="page-tabs">
      <u-tabs
        :active-item-style="{
          fontSize: '32rpx',
        }"
        gutter="24"
        font-size="28"
        height="92"
        bar-width="40"
        active-color="#000"
        :list="tabsList"
        :is-scroll="true"
        :current="current"
        @change="tabsChange"
      ></u-tabs>
    </div>
    <div class="page-screen">
      <div class="flex-y-center top-1">
        <div class="flex-y-center flex-w-1">
          <div
            @click="showPopup = 'orderby'"
            :class="[
              'flex-y-center u-m-r-60',
              showPopup == 'orderby' && 'price-color',
            ]"
          >
            <div>创建时间</div>
            <div
              v-if="showPopup != 'orderby'"
              class="iconfont u-m-l-10 icon-arrow-down-filling u-font-24"
            ></div>
            <div
              v-else
              class="iconfont u-m-l-10 icon-arrow-up-filling u-font-24"
            ></div>
          </div>
          <div
            @click="showPopup = 'cat'"
            :class="[
              'flex-y-center u-m-r-60',
              showPopup == 'cat' && 'price-color',
            ]"
          >
            <div>服务分类</div>
            <div
              v-if="showPopup != 'cat'"
              class="iconfont u-m-l-10 icon-arrow-down-filling u-font-24"
            ></div>
            <div
              v-else
              class="iconfont u-m-l-10 icon-arrow-up-filling u-font-24"
            ></div>
          </div>
          <div
            @click="showPopup = 'shaixuan'"
            :class="[
              'flex-y-center u-m-r-60',
              showPopup == 'shaixuan' && 'price-color',
            ]"
          >
            <div>筛选</div>
            <div
              v-if="showPopup != 'shaixuan'"
              class="iconfont icon-arrow-down-filling u-font-24"
            ></div>
            <div v-else class="iconfont icon-arrow-up-filling u-font-24"></div>
          </div>
        </div>

        <div
          @click="$emit('update:isModify', !isModify)"
          class="right flex-y-center"
        >
          <div v-if="!isModify" class="iconfont icon-nav-list u-font-36"></div>
          <div>{{ isModify ? "取消批量" : "批量" }}</div>
        </div>
      </div>

      <div v-if="showPopup" @click="showPopup = ''" class="search-popup">
        <div @click.stop class="content">
          <!-- 时间排序 -->
          <div class="date-box" v-if="showPopup == 'orderby'">
            <div
              @click="submitSearch(item, 'orderby')"
              v-for="item in sortList"
              :key="item.id"
              :class="[
                'u-p-t-20 u-p-b-20 flex-x-sb',
                item.id === searchForm.orderby && 'price-color',
              ]"
            >
              <text>{{ item.name }}</text>
              <text
                v-if="searchForm.orderby === item.id"
                class="iconfont icon-seleted u-font-50"
              ></text>
            </div>
          </div>

          <!-- 分类筛选 -->
          <div v-else-if="showPopup === 'cat'" class="cat-box">
            <div
              v-for="item in catList"
              @click="submitSearch(item, 'cat_id')"
              :key="item.id"
              :class="[
                'u-p-t-20 u-p-b-20 flex-x-sb',
                item.id === searchForm.cat_id && 'price-color',
              ]"
            >
              <text>{{ item.name }}</text>
              <text
                v-if="searchForm.cat_id === item.id"
                class="iconfont icon-seleted u-font-50"
              ></text>
            </div>
          </div>
          <div v-else-if="showPopup == 'shaixuan'" class="shaixuan-box">
            <div class="font-w-600 u-p-t-20 u-p-b-24">起止时间</div>

            <div class="date-box flex-y-center">
              <div class="left" @click="showPicker = 'begin'">
                <text>
                  {{
                    searchForm.begin
                      ? timeToDate(searchForm.begin, "yyyy-mm-dd")
                      : "开始时间"
                  }}
                </text>
                <text class="iconfont icon-calculator u-font-40"></text>
              </div>
              <div class="u-p-l-16 u-p-r-16">-</div>
              <div @click="showPicker = 'end'" class="right">
                <text>
                  {{
                    searchForm.end
                      ? timeToDate(searchForm.end, "yyyy-mm-dd")
                      : "结束时间"
                  }}
                </text>
                <text class="iconfont icon-calculator u-font-40"></text>
              </div>
            </div>

            <u-picker
              mode="time"
              :value="showPicker"
              :mask-close-able="false"
              :default-time="timeToDate(searchForm[showPicker])"
              @confirm="searchDateChange($event, showPicker)"
              @cancel="showPicker = false"
            ></u-picker>

            <div class="btns">
              <div @click="resetSearch" class="bt">重置</div>
              <div
                @click="$emit('loadData', true), (showPopup = false)"
                class="bt_1 bt u-m-l-20"
              >
                确定
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import { goodsCateList } from "@/api/service-home";
const sortList = [
  {
    name: "创建时间",
    id: 0,
  },
  {
    name: "时间从远到近",
    id: 1,
  },
  {
    name: "时间从近到远",
    id: 2,
  },
  {
    name: "价格从高到低",
    id: 3,
  },
  {
    name: "价格从低到高",
    id: 4,
  },
];
export default {
  props: {
    searchForm: {
      type: Object,
      default() {
        return {};
      },
    },
    tabsList: {
      type: Array,
      default() {
        return [
          {
            name: "已选服务",
          },
          {
            name: "待选服务",
          },
          {
            name: "全部服务",
          },
        ];
      },
    },
    isModify: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sortList,
      current: 0,
      showPicker: false,
      catList: [{ id: "", name: "全部分类" }],
      showPopup: false,
    };
  },
  computed: {
    timeToDate() {
      return function (time, type) {
        let date = new Date();
        if (time) date = new Date(time * 1000);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;

        let f = date.getMinutes();
        f = f < 10 ? "0" + f : f;

        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;

        return type === "yyyy-mm-dd"
          ? `${y}-${m}-${d}`
          : `${y}-${m}-${d} ${h}:${f}:${s}`;
      };
    },
  },
  created() {
    this.getCatList();
  },
  methods: {
    valueChange(e, key) {
      this.$emit("update:searchForm", Object.assign(this.searchForm,{[key]:e}));
    },
    async getCatList() {
      const res = await goodsCateList();
      this.catList.push(...res.data.list);
    },
    tabsChange(e) {
      this.current = e;
      this.$emit("loadData", true, false);
    },
    searchDateChange(e, key) {
      this.$emit("update:searchForm", Object.assign(this.searchForm,{[key]:e.timestamp}));
      
      this.showPicker = false;
    },
    resetSearch() {
      this.$emit("resetSearch");
      this.showPopup = false;
    },
    submitSearch(item, type) {
      this.$emit("update:searchForm", Object.assign(this.searchForm,{[type]:item.id}));

      this.$emit("loadData", true);

      this.showPopup = false;
    },
  },
  options: { styleIsolation: "shared" }, //组件样式穿透添加
};
</script>

<style lang="scss" scoped>
.font-del {
  text-decoration: line-through;
}
.bg-fff {
  background: #fff;
}
.bdrd-20 {
  border-radius: 20rpx;
}
.price-color {
  color: #f0250e;
}

.page-search {
  padding: 18rpx 24rpx;
}

.page-tabs {
  /deep/ .u-tabs {
    .u-tab-bar {
      background-color: #f0250e !important;
      bottom: 10rpx;
    }
  }
}

.page-screen {
  position: relative;
  .top-1 {
    display: flex;
    align-items: center;
    height: 66rpx;
    padding: 0 24rpx;
    background: #f2f2f2;
    color: #8c8c8c;
  }
  .search-popup {
    position: fixed;
    top: calc(100rpx + 92rpx + 66rpx);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: rgba($color: #000000, $alpha: 0.4);
    .content {
      background: #fff;
      border-radius: 0 0 20rpx 20rpx;
      padding: 24rpx;
      .price-color {
        color: #f0250e;
      }

      .shaixuan-box {
        .date-box {
          .left,
          .right {
            background: #f2f2f2;
            border-radius: 16rpx;
            padding: 24rpx;
            color: #8c8c8c;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 328rpx;
          }
        }
        .btns {
          display: flex;
          align-items: center;
          margin-top: 40rpx;

          .bt {
            width: 0;
            flex: 1;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            font-weight: 600;
            background: #f2f2f2;
            border-radius: 100rpx;
          }
          .bt_1 {
            background: #f0250e;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
